<!DOCTYPE html>
<html>
<head>
    <title>Local data operations</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <script src="../../content/shared/js/people.js"></script>

        <div id="example" class="k-content">

            <div class="configuration">
                <span class="configHead">Configure</span>
                <ul class="options">
                    <li>
                        <label for="page">Page:</label>
                        <input type="text" value="1" id="page" class="k-textbox" style="margin: -3px 0 3px;" />
                    </li>
                    <li>
                        <label for="order">Order by:</label>
                        <select id="order" style="width:115px;float:right;margin-top: -3px;">
                            <option value="Id">Id</option>
                            <option value="FirstName">First Name</option>
                            <option value="LastName">Last Name</option>
                            <option value="Age">Age</option>
                        </select>
                    </li>
                    <li>
                        <label for="dir">Direction:</label>
                        <select id="dir" style="width:115px;float:right;margin-top: -3px;">
                            <option value="asc">Ascending</option>
                            <option value="desc">Descending</option>
                        </select>
                    </li>
                    <li>
                        <button class="k-button" id="apply">Apply</button>
                    </li>
                </ul>
            </div>

            <table id="people" class="metrotable">
                <thead>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Title</th>
                    <th>Age</th>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

            <script id="template" type="text/x-kendo-template">
                <tr>
                    <td>#= Id #</td>
                    <td>#= FirstName #</td>
                    <td>#= LastName #</td>
                    <td>#= Title #</td>
                    <td>#= Age #</td>
                </tr>
            </script>

            <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        pageSize: 10,
                        data: createRandomData(500),
                        change: function() { // subscribe to the CHANGE event of the data source
                            // update the max attribute of the "page" input
                            $("#page").attr("max", this.totalPages());

                            $("#people tbody").html(kendo.render(template, this.view()));
                        }
                    });

                    // read the data
                    dataSource.read();

                    $("#apply").click(function() {
                        var page = parseInt($("#page").val(), 10);

                        // validate the page - it must be a number within the allowed range
                        if (isNaN(page) || page < 1 || page > dataSource.totalPages()) {
                            alert(kendo.format("Page must be a number between 1 and {0}", dataSource.totalPages()));
                            return;
                        }

                        // query the remote service
                        dataSource.query({
                            page: page,
                            pageSize: 10,
                            sort: {
                                field: $("#order").val(),
                                dir:$("#dir").val()
                            }
                        });
                    });

                    //initialize dropdownlist components
                    $("#order").kendoDropDownList();
                    $("#dir").kendoDropDownList();
                });
            </script>

            <style scoped>
                .metrotable {
                	width: 520px;
                	margin: 0 0 20px;
                	border-collapse: collapse;
                }

                table.metrotable > thead > tr > th
                {
                    padding-top: 0;
                    font-size: 1.4em;
                }
            </style>
        </div>

	
			
</body>
</html>
